<template>
	<view class="content">
		<view class="head-wrapper">
			<!-- <image class="head" src="../../static/me/empty_user_white.png" mode="aspectFit"></image> -->
			<image class="logo" src="../../static/img/logo.jpg"/><br/>
			<text>住哪儿</text>
		</view>
		<view class="mobile">
			<view class="field">
				<input placeholder="请输入手机号" maxlength="11" type="number" v-model="mobile" />
				<uni-icon v-if="mobile.length != 0" class="search-cancle-icon" size="25" type="close" @click="onMobileClearButtonClick"></uni-icon>
			</view>
		</view>
		<view class="verify-code">
			<view class="field"><input placeholder="请输入验证码" maxlength="6" type="number" v-model="verifyCode" /></view>
			<view @tap="getsmscode" class="get-verify-code"  hover-class="btn-hover">{{smsbtn.text}}</view>
		</view>
		<view class="description">新用户直接输入手机号，点击获取验证码，并输入验证码完成注册与登录</view>
		
		<button v-if="user.id!=''" class="login-btn" hover-class="btn-hover" @tap="RegesterMobile">绑定手机号</button>
		<button v-else class="login-btn" @tap="toLogin"  open-type="getUserInfo">登录并绑定手机号</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mobile: '',
			verifyCode: '',
			user: {
				nickName: '未登录',
				avatarUrl: '/static/img/face-white.png',
				openid: '',
				id: ''
			},
			smsbtn: {
					text: '获取验证码',
					status: false,
					codeTime: 120
				},
			timerId: null,
		};
	},
	onLoad:function(){
		var me=this;
		uni.getStorage({
			key: 'UserInfo',
			success: (res) => {
				if (!res.data) {
					return;
				}
				this.user = res.data;
			},
			fail: (e) => {
				//this.toLogin(); 
			}
		});
	},
	methods: {
		onMobileClearButtonClick() {
			this.mobile = '';
		},
		
		
		toLogin() {
			var me=this;
			if(!(/^1[3456789]\d{9}$/.test(this.mobile))){ 
				uni.showToast({
					title: '请输入正确的手机号！',
					icon:'none'
				});
				return false;
			} 
			if(this.verifyCode=="")
			{
				uni.showToast({
					title: '请输入验证码！',
					icon:'none'
				});
				return false;
			}
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes);
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
		
							me.user.nickName = infoRes.userInfo.nickName;
							me.user.avatarUrl = infoRes.userInfo.avatarUrl;
							uni.request({
								url: me.$rootUrl + '/Authorize/Verify',
								data: {
									wechaname: infoRes.userInfo.nickName,
									avatarUrl: infoRes.userInfo.avatarUrl,
									Code: loginRes.code
								},
								method: 'POST',
								success(res) {
		
									if (res.data.success) {
										me.user.openid = res.data.data.openid;
										me.user.id = res.data.data.memberid;
										me.RegesterMobile();
									} else {
										uni.showModal({
											content: '服务器错误!',
											showCancel: false
										});
									}
								},
								fail() {
									me.isLoading = false;
									me.loadMoreText = me.connectionFailText;
									uni.showModal({
										content: me.connectionFailText,
										showCancel: false
									});
								}
							});
		
						}
					});
				}
			});
		},
		
		
		
		
		RegesterMobile() {
			var me=this;
			if(!(/^1[3456789]\d{9}$/.test(this.mobile))){ 
				uni.showToast({
					title: '请输入正确的手机号！',
					icon:'none'
				});
				return false;
			} 
			if(this.verifyCode=="")
			{
				uni.showToast({
					title: '请输入验证码！',
					icon:'none'
				});
				return false;
			}
			
			uni.showLoading({
				title: '登录中，请稍后...'
			});
			uni.request({
				url: me.$rootUrl+'/Authorize/Regester',
				data: { Mobile: me.mobile,Code:me.verifyCode,MemberId:me.user.id},
				method:'POST',
				success: (result) => {
					if (result.statusCode == 200) {
						uni.hideLoading();
						me.user.mobile=me.mobile;
						if(result.data.success)
						{
							uni.setStorage({
								key: 'UserInfo',
								data: me.user,
								success: function () {
									uni.navigateBack({
										
									})
								}
							});
						}
						else
						{
							uni.showToast({
								title: '验证码输入错误！',
								icon:'none'
							});
						}
					}
				}
			});
			
			
			
				
		},
		getsmscode: function() {
			var me=this;
			if(!(/^1[3456789]\d{9}$/.test(this.mobile))){ 
				uni.showToast({
					title: '请输入正确的手机号',
					icon:'none'
				});
				return false;
			} 
			if (this.smsbtn.status == true ) {
				console.log('message：', "别着急！短信已经发送了~");
				return false;
			}
			
			
				
			uni.request({
				url: me.$rootUrl+'/Message/GetCode',
				data: { mobile: me.mobile },
				success: (result) => {
					if (result.statusCode == 200) {
						if(result.data.success)
						{
							
							me.timerId = setInterval(() => {
							
									var codeTime = me.smsbtn.codeTime;
									codeTime--;
									me.smsbtn.codeTime = codeTime;
									me.smsbtn.text ="已发送(" +codeTime + "S)";
									if (codeTime < 1) {
										clearInterval(me.timerId);
										me.smsbtn.text = "重新获取";
										me.smsbtn.codeTime = 120;
										me.smsbtn.status = false;
									}
								},
								1000);
							
							me.smsbtn.status = true; // 这段代码其实应该加在你request请求 短信发送成功后 
							return;
						}
						else
						{
							uni.showToast({
								title: result.data.msg,
								icon:'none'
							});
							return;
						}
						
					}
					else
					{
						uni.showToast({
							title: "网络错误！",
							icon:'none'
						});
						return;
					}
				}
			});
			return false;
		}
		
	}
};
</script>

<style lang="scss">
	.content {
		padding: 30upx;
		.head-wrapper {
			//display: flex;
			// justify-content: center;
			// align-items: center;
			text-align: center;
			.head {
				background-color: #0984e3;
				height: 150upx;
				width: 150upx;
				margin: 50upx 50upx 0 50upx;
				padding: 30upx;
				border-radius: 50%;
			}
			.logo {
			  height: 200upx;
			  width: 200upx;
			}
			text{
				font-size:55upx;
				font-weight: bold;
				color:#D1372C;
			}
		}
	
		.field {
			display: flex;
			align-items: center;
			border: 1upx solid #b2bec3;
			border-radius: 10upx;
			padding: 20upx;
			font-size: 32upx;
	
			input {
				flex: 1;
			}
		}
	
		.mobile {
			margin-top: 100upx;
		}
	
		.verify-code {
			display: flex;
			margin-top: 30upx;
	
			.field {
				flex: 1;
			}
	
			.get-verify-code{
				margin-left: 20upx;
				display: flex;
				align-items: center;
				color: #D1372C;
				border:1px solid #D1372C;
				background-color:white;
				border-radius: 10upx;
				font-size: 32upx;
				padding: 0 20upx;
				position:relative;
				&.btn-hover{
					background-color:#f1f2f6;
				}
			}
		}
	
		.description {
			color: #2d3436;
			margin-top: 30upx;
			font-size: 30upx;
			text-indent: 2em;
			line-height: 1.5em;
		}
	
		.login-btn {
			margin-top: 100upx;
			display: flex;
			align-items: center;
			background-color: #0984e3;
			color: white;
			justify-content: center;
			// box-shadow:10px 10px 5px #888888;
			
			font-family: 'Open Sans', sans-serif;
			text-decoration:none;
			border-radius: 5px;
			box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
			&.btn-hover{
				background-color:#70a1ff;
			}
		}
	}
	
</style>
